<template>
  <view class="home-swiper">
    <swiper
      class="home-swiper__container"
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      :circular="true"
      indicator-active-color="#1890ff"
    >
      <swiper-item v-for="(item, index) in banners" :key="index" class="home-swiper__item">
        <image :src="item.imageUrl" class="home-swiper__image" mode="aspectFill" @tap="handleItemClick(item)" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

interface Banner {
  id: string;
  imageUrl: string;
  linkUrl?: string;
  title?: string;
}

export default defineComponent({
  name: 'HomeSwiper',
  props: {
    banners: {
      type: Array as PropType<Banner[]>,
      required: true
    }
  },
  emits: ['click'],
  setup(props, { emit }) {
    const handleItemClick = (item: Banner) => {
      emit('click', item);
    };

    return {
      handleItemClick
    };
  }
});
</script>

<style lang="scss">
.home-swiper {
  width: 100%;
  height: 320px;

  &__container {
    width: 100%;
    height: 100%;
  }

  &__item {
    width: 100%;
    height: 100%;
  }

  &__image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}
</style>
